# Avatar

## Installation
`npm i @snack-uikit/avatar`

[Changelog](./CHANGELOG.md)

## Example

```typescript jsx
import { Avatar } from "@snack-uikit/avatar";

<Avatar
  name="Name Surname"
  src="path-to-avatar/image.jpg"
  size='xl'
/>

<Avatar 
  name="Name Surname"
  appearance='pink'
  indicator='violet'
  shape='square'
  showTwoSymbols={true}
/>
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Avatar
Компонент отображения аватара пользователя.
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| name* | `string` | - | Имя |
| src | `string` | - | src аттрибут изображеня |
| appearance | enum Appearance: `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"`, `"neutral"` | red | Внешний вид |
| size | enum Size: `"xxs"`, `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"`, `"xxl"` | s | Размер |
| shape | enum Shape: `"round"`, `"square"` | round | Форма: круглая или квадратная |
| indicator | enum Appearance: `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"`, `"neutral"`, `"primary"` | - | Индикатор |
| showTwoSymbols | `boolean` | - | Отображение двух заглавных символов имени |
| className | `string` | - | CSS-класс |


[//]: DOCUMENTATION_SECTION_END
